<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-for</title>
    <script src="js/vue-2.7.14.js"></script>

</head>
<body>
    <div id="app">
        <!--无序列表-->
        <ul>
            <li v-for="e in arr">{{e}}</li>
        </ul>
        <!--有序列表-->
        <ol>
            <li v-for="(ele,index) in arr">{{index}}::{{ele}}</li>
        </ol>

        <ol>
            <li v-for="(value,key) in user">{{key}}::{{value}}</li>
        </ol>

        <!--使用表格遍历对象数组-->
        <table border="1" bordercolor="red" cellspacing="0" width="200">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr: ["bubu","yier","布布","一二"],
                user:{
                    id:1,
                    name:"yier",
                    age:12
                },
                users:[
                    {
                        id:1,
                        name:"yier",
                        age:12
                    },
                    {
                        id:2,
                        name:"bubu",
                        age:18
                    },
                ]
            },
            method:{

            }
        });
    </script>

</html>